<template>
	<view class="container">
		<view class="container__warpswiper">
			<view class="container__warpswiper__row">
				<view class="container__warpswiper__row__ul" >
					<view>
						<view class="container__warpswiper__row__ul__title"><text>{{list.lottery_title}}</text>『{{list.title}}』</view>
					</view>
					<view  >
						
						<view class="container__warpswiper__row__ul__li" v-for="(vl,vk) in list.meansList" :key="vk" @click="copyData(vl,list.title)">
							<!--样式一-->
							<view v-if="list.is_style == 1">
								<u-row >
									<u-col span="12">
										<view class="text-center">
											<text >{{vl.issue}}期:</text>
											<text >{{list.remark}}</text>
											<text v-if="vl.drawp">开:{{vl.drawp}}</text>
											<u-icon v-if="vl.is_true == 1" name="checkmark" size="16" color="#FF0000" style="float:right;font-weight: bold;"></u-icon>
											<u-icon v-else name="close" size="16"  style="float:right;font-weight: bold;"></u-icon>
										</view>
									</u-col>
									
								</u-row >
								<u-row>
									<u-col span="12">
										<view class="text-center" :class="{'nub-flex':(vl.means.length > 11)}">
											<template v-for="(value,key) in vl.means" >
												<text :key="key" >
													<text class="container__warpswiper__row__ul__li__text-means" :class="{'text-active':value.isTrue,'nub-flex-text':(vl.means.length > 11)}">{{value.value}}</text>
													<text v-if="value.code && value.code.length">
														<template v-for="(fv,fk) in value.code">
															<text :key="fk" class="container__warpswiper__row__ul__li__text-means-code" :class="{'text-active':fv.isTrue}">{{fv.value}}</text>
														</template>
													</text>
												</text>
											</template>
										</view>
									</u-col>
								</u-row>
							</view>
							
							<!--默认样式一-->
							<view v-else>
								<u-row >
									<u-col span="3">
										<view class="text-right">{{vl.issue}}期:</view>
									</u-col>
									<u-col span="5">
										<view class="text-center">
											<template v-for="(value,key) in vl.means" >
												<text :key="key" >
													<text class="container__warpswiper__row__ul__li__text-means" :class="{'text-active':value.isTrue}">{{value.value}}</text>
													<text v-if="value.code && value.code.length">
														<template v-for="(fv,fk) in value.code">
															<text :key="fk" class="container__warpswiper__row__ul__li__text-means-code" :class="{'text-active':fv.isTrue}">{{fv.value}}</text>
														</template>
													</text>
												</text>
												
												
											</template>
										</view>
									</u-col>
									<u-col span="4">
										<view >
											<text v-if="vl.drawp">开:{{vl.drawp}}</text> 
											<u-icon v-if="vl.is_true == 1" name="checkmark" size="16" color="#FF0000" style="float:right;font-weight: bold;"></u-icon>
											<u-icon v-else name="close" size="16"  style="float:right;font-weight: bold;"></u-icon>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
					
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {getMeansDetail} from '@/api/lottery.js'
	export default {
		data() {
			return {
				list:[],
				listQuery:{
					id:0,
					lottery_alias:0,
				}
			}
		},
		onLoad(opt){
			if(!opt || !opt.id || !opt.alias) {
				uni.$u.toast('缺少参数！');
				uni.reLaunch({
					url: '/pages/index/index',
					success: (e) => {
						
					},
					fail: (err) => {
						console.log(err)
					}
				})
				return false;
			}
			this.listQuery = {
				id:opt.id,
				lottery_alias:opt.alias,
			}
			this.initList();
		},
		methods: {
			initList(){
				getMeansDetail(this.listQuery).then(res=>{
					if(res.code === 200) {
						this.list = res.data.list;
						uni.setNavigationBarTitle({
						  title: this.list.title
						});
					}else{
						uni.$u.toast(res.message);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
	  width: 100%;
	  min-height: 100%;
	  display: flex;
	}
	/* #endif */
	.container{
		display: flex;
		flex: 1;
		flex-direction: column;
		// overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
		margin: 10rpx;
		
		
		
		&__warpswiper{
			background-color: #ffffff;
			flex: 1;
			
			&__item{
				flex: 1;
				flex-direction: column;
				overflow: auto;
			}
			&__row{
				flex: 1;
				flex-direction: row;
				
				
				&__ul{
					border: solid #f1592a 6rpx;
					border-radius: 15rpx;
					margin-bottom: 10rpx;
					&__title{
						width: 100%;
						text-align: center;
						background-color: #f16338;
						color:#FFFFFF;
						font-size: 30rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-weight: bold;
					}
					&__mall{
						font-size: 22rpx;
					}
					&__li{
						width: 90%;
						margin: 0 auto;
						padding: 10rpx 0;
						font-weight: bold;
						font-size: 28rpx;
						&__text-means{
							margin-right:4rpx;
						}
						&__text-means-code{
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
	.nub-flex{
		flex-wrap: wrap;
		display: flex;
		width: 80%;
		margin: 0 auto;
	}
	.nub-flex-text{
		width:40rpx;
		text-align: center;
		display:block;
	}
	.text-center{
		text-align: center;
	}
	.text-right{
		text-align: right;
	}
	.text-active{
		color:#FF0000;
	}
	
	
	

</style>
